<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: orange;

      /* 
        ■ CSS Animation的使用分成两个步骤：
          ■步骤一：使用keyframes定义动画序列(每一帧动画如何执行)
          ■步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

      ◼ CSS animation 属性是 animation-name，animation-duration, 
      animation-timing-function，animation-delay，animatio-iteration-count，
      animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
        ◼ animation-name：指定执行哪一个关键帧动画
        ◼ animation-duration：指定动画的持续时间
        ◼ animation-timing-function：指定动画的变化曲线
             ease-in-out：动画以慢速开始，然后加快，在结束前变慢。
             linear：动画从头到尾的速度是相同的。
             ease-in：动画以慢速开始。
             ease-out：动画以慢速结束。
             cubic-bezier(n, n, n, n)：自定义动画曲线，n取值范围0~1
             steps(n)：将动画分成几步执行，n表示步数
        ◼ animation-delay：指定延迟执行的时间
        ◼ animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
        ◼ animation-direction：指定方向，常用值normal和reverse
        ◼ animation-fill-mode：执行动画最后保留哪一个值
             none：回到没有执行动画的位置
             forwards：动画最后一帧的位置
             backwards：动画第一帧的位置
        ◼ animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）
            paused：暂停动画，running：播放动画
      */
      /* box要执行moveAnim的动画 */
      animation-name: moveAnim;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;

      /* 其他属性: */
      /* 动画执行的次数 */
      /* animation-delay: 2s; */
      /* animation-iteration-count: 2; */
      /* animation-direction: reverse; */
      /* 元素停留在动画的哪一个位置 */
      /* animation-fill-mode: forwards; */

      /* js动态修改 */
      /* animation-play-state: paused; */
      animation: moveAnim 3s linear 1s 2 normal forwards, ;
    }
    /* 
      ■可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配：
        口关键帧使用percentage来指定动画发生的时间点；
        口0%表示动画的第一时刻，100%表示动画的最终时刻；
        口因为这两个时间点十分重要，所以还有特殊的别名：from和to;
      ■也就是说可以使用from和to关键字：
        口from相当于0%
        口to相当于100%
    */
     /* 定义动画序列 帧*/
    @keyframes moveAnim {
      0% {
        transform: translate(0, 0) scale(0.5, 0.5);
      }

      33% {
        transform: translate(0, 200px) scale(1.2, 1.2);
      }

      66% {
        transform: translate(400px, 200px) scale(1, 1);
      }

      100% {
        transform: translate(400px, 0) scale(0.5, 0.5);
      }
    }

  </style>
</head>
<body>
  
  <div class="box">

  </div>

</body>
</html>